import headerStyle from "./css/header.module.less";
import { useDispatch, useSelector } from "react-redux";
import { DownOutlined, UserOutlined } from "@ant-design/icons";
import { Button, Dropdown, message, Radio, Tooltip, Switch } from "antd";
import { useNavigate } from "react-router-dom";
import React, { useState } from "react";
import { changeTheme } from "@/store/user";

export default function HeaderCom() {
  const dispatch = useDispatch();
  const nowTheme = useSelector((state) => state.user.theme);

  let useNavigateGo = useNavigate();
  const userData = useSelector((state) => state.user.userData);
  const handleButtonClick = (e) => {
    message.info("Click on left button.");
  };
  const handleMenuClick = (e) => {
    if (e.key == 1) {
      useNavigateGo("/login");
    }
    message.info("Click on menu item.");
  };

  const items = [
    {
      label: "退出登录",
      key: "1",
      icon: <UserOutlined />,
    },
  ];
  const menuProps = {
    items,
    onClick: handleMenuClick,
  };

  const [theme, setTheme] = useState("dark");

  const options = [
    {
      label: "深色",
      value: "dark",
    },
    {
      label: "白色",
      value: "white",
    },
  ];
  const onChange = ({ target: { value } }) => {
    setTheme(value);
    dispatch(changeTheme(value));
  };
  return (
    <header
      className={nowTheme == "dark" ? headerStyle.header1 : headerStyle.header2}
    >
      <div className={headerStyle.title}>
        <div>
          <span className={headerStyle.react}>react&nbsp;&nbsp;</span>
          {/* 后台管理 */}

          <span className={headerStyle.meage}>后台管理</span>
        </div>
      </div>
      <div className={headerStyle.right}>
        <div>
          <Radio.Group
            className={headerStyle.Radio}
            options={options}
            onChange={onChange}
            value={theme}
            optionType="button"
            buttonStyle="solid"
          />
        </div>

        <Dropdown.Button menu={menuProps} onClick={handleButtonClick}>
          {userData.name || "用户"}
        </Dropdown.Button>
      </div>
    </header>
  );
}
